<template>

  <div>

    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>信令服务设置</span>
       </div>
        <div>
          <el-form ref="signalingForm"  :model="signalingForm" label-width="110px" :rules="rules">
            <el-row :gutter="20" style="margin-top 10px; ;">
              <el-col :span="14">

                <el-form-item label="信令外网IP" prop="signalingDomain">
                  <el-input v-model="signalingForm.signalingDomain" placeholder="请输入信令外网IP" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令内网IP" prop="signalingDomainInner">
                  <el-input v-model="signalingForm.signalingDomainInner" placeholder="请输入信令内网IP" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令SSL Key" prop="signalingSSLKeyAbsolutePath">
                  <el-input v-model="signalingForm.signalingSSLKeyAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="信令SSL Cert" prop="signalingSSLCertAbsolutePath">
                  <el-input v-model="signalingForm.signalingSSLCertAbsolutePath" placeholder="请输入默认路径" autocomplete="off"></el-input>
                </el-form-item>

              </el-col>
              <el-col :span="10">
                <el-form-item label="外网信令端口">
                  <el-input v-model="signalingForm.signalingPort" placeholder="请输入外网信令端口" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="内网信令端口">
                  <el-input v-model="signalingForm.signalingPortInner" placeholder="请输入内网信令端口" autocomplete="off" ></el-input>
                </el-form-item>

                <el-form-item label="启用SSL">
                  <el-switch
                    v-model="signalingForm.signalingEnableSSL"
                    active-value="1"
                    inactive-value="0"
                    >
                  </el-switch>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <div style="border-top: 1px solid #e6ebf5;padding-top: 16px;">
          <el-row :gutter="20">
            <el-col :span="16">
              <div class="grid-content bg-purple">
                <el-button type="danger" round plain icon="el-icon-warning"  @click="restartSignaling" :loading="loading">重启服务</el-button>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="grid-content bg-purple" style="text-align: right;">
                <el-button type="primary" round plain icon="el-icon-refresh-right"  @click="submitForm" :loading="loading">更新</el-button>
              </div>
            </el-col>
          </el-row>
        </div>
    </el-card>

  </div>

</template>
<script>

  import {
    getConfig,
    saveConfig
  } from '@/api/cloud/config'

  import {
    restartSignaling
  } from '@/api/cloud/server'

  import {
    isOk
  } from '@/utils/request'


  export default {
    name: 'SignalingServerConfig',
    components: {
    },
    props: {
      properties: {
        type: Object,
        default: () => ({})
      }
    },
    computed:{
    },
    watch:{
      properties: {
        handler: function(value) {
        },
        immediate: true,
        deep: false
      }
    },
    data(){
      return {
        loading:false,
        signalingForm:{
          signalingDomain:"",
          signalingDomainInner:"",
          signalingPort:"",
          signalingPortInner:"",
          signalingEnableSSL:"0",
          signalingSSLKeyAbsolutePath:"",
          signalingSSLCertAbsolutePath:"",
        },
        rules: {
          signalingDomain: [{
            required: true,
            message: '请输入信令外网地址',
            trigger: 'blur'
          }],
          signalingDomainInner: [{
            required: true,
            message: '请输入信令内网网地址',
            trigger: 'blur'
          }],
          hostDomain: [{
            required: true,
            message: '请输入后端IP/域名',
            trigger: 'blur'
          }]
        }
      }
    },
    created() {
      this.getConfig();
    },
    methods:{
      getConfig(){
        this.loading=true
        getConfig().then(response => {
          this.loading=false
          if(isOk(response)){
            const _data=response.result;
            this.signalingForm.signalingDomain=_data.signalingDomain
            this.signalingForm.signalingDomainInner=_data.signalingDomainInner
            this.signalingForm.signalingPort=_data.signalingPort
            this.signalingForm.signalingPortInner=_data.signalingPortInner
            this.signalingForm.signalingSSLKeyAbsolutePath=_data.signalingSSLKeyAbsolutePath
            this.signalingForm.signalingEnableSSL=_data.signalingEnableSSL
            this.signalingForm.signalingSSLCertAbsolutePath=_data.signalingSSLCertAbsolutePath
          }
        }).catch(err => {
          console.log(err);
        })
        .finally(() => {
          this.loading = false
        })
      },
      restartSignaling(){
        this.$confirm('重启会释放正在连接用户，确认重启吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.loading=true
          restartSignaling().then(response => {
            this.loading=false
            if(isOk(response)){
              this.$message({
                type: 'success',
                message:response.message
              })
            }
          }).catch(err => {
            console.log(err);
          })
          .finally(() => {
            this.loading = false
          })
        })
      },
      submitForm: function() {
        this.$refs.signalingForm.validate((valid) => {
          if (valid) {
            this.loading = true
            saveConfig(this.signalingForm).then(rsp => {
              this.$message({
                type: 'success',
                message:rsp.message
              })
            }).catch(err => {
              console.log(err);
            })
            .finally(() => {
              this.loading = false
            })
          }
        })
      },
    }
  }
</script>

<style>
</style>
